import React from 'react';
import ReactDOM from 'react-dom';
import { Breadcrumb, Button, Form, Select, Input, Pagination, Row, Col, Popover, Card, Modal, Message, Icon } from 'antd';
import FinanceModal from '../../../components/financeModal/finance';
const FormItem = Form.Item;
const Option = Select.Option;
const confirm = Modal.confirm;

let List = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    let currentPage = this.props.location.state ? this.props.location.state.currentPage : 1;
    return {
      data: [],
      visibleList: {},
      dataBox: null,
      modal1Visible: false,
      modal2Visible: false,
      financeVisible: false,
      total: 0,
      currentPage: currentPage,
      pageSize: 12,
      tenementId: '',
      visible: false,
      forms: {},
    }
  },

  componentDidMount() {
    this.handleSearch();
  },


  fetch(param) {

    let params = Object.assign({}, {pageSize: this.state.pageSize, currentPage: 1}, param);
    let _me = this
    console.log('params', params)
    Utils.sendAjax({
      url: '/tenement/beforeRent/list',
      data: JSON.stringify(params),
      type: 'json',
      callback: function (result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            dataBox: _me.renderBox(result.data),
            total: result.page.total,

          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  renderBox(data) {
    if (!data[0]) {
      return (
        <li className="none-data">
          <span><Icon type="frown"/>暂无数据...</span>
        </li>
      )
    }
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14},
    };
    const { getFieldProps } = this.props.form;
    let boxArr = [];
    data.forEach((item) => {
      let content = (
        <Form horizontal id="card" className="form-wrap-li " form={this.props.form}>
          <FormItem {...formItemLayout}
            label="业主姓名">
            <p className="ant-form-text">{item.ownerName}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="房屋地址">
            <p className="ant-form-text">{item.address}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="物业名称">
            <p className="ant-form-text">{item.tenementName}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="联系电话">
            <p className="ant-form-text">{item.mobilePhone}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="装修类型">
            <p className="ant-form-text">{item.decorateStr}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="房屋面积">
            <p className="ant-form-text">{item.area}平方米</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="房屋租金">
            <p className="ant-form-text">{item.rent}元/月</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="起租日期">
            <p className="ant-form-text">{item.leaseInception}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="租赁期限">
            <p className="ant-form-text">{item.period}个月</p>
          </FormItem>
          <FormItem >
            <Button type="primary" size="small"
                    onClick={this.setModal1Visible.bind(this, item.id)}>租赁</Button>
            <Button type="ghost" size="small" onClick={this.handleModify.bind(this, item)}>修改</Button>
          </FormItem>
        </Form>
      );


      let boxDom = (
        <li className="ul-wrap-li" key={`li-${item.id}`}>
          <Popover className="bubble-card " placement="right" title="房源信息" content={content} trigger="click"
                   overlayStyle={{zIndex:100}}>
            <Card >
              <p>
                <span className="li-name">{item.ownerName}</span>
                <span className="delete-span" onClick={this.setModa12Visible.bind(this, item.id)}><Icon type="delete" className="dela"/></span>
              </p>
              {item.isBorrow === 2 ?
                <div>
                  <p><strong>￥{item.rent}</strong></p>
                  <p>{item.address}</p>
                </div>
                :
                <div>
                <p><strong>￥{item.rent}</strong>{item.isBorrow === 1 ? <span className="loanIcon"  >融</span>:''}</p>
                <p>{item.address}{item.isBorrow !== 1 ? <Button className="loanFincail"  type="ghost" size="small" onClick={this.willFinancing.bind(this, item)}>我要融资</Button>:''}</p>
              </div>}

            </Card>

          </Popover>

        </li>
      )
      boxArr.push(boxDom)
    })
    return boxArr;
  },


  del(){
    console.log('点击了删除')
  },


  handleSearch() {
    this.listRender(this.state.data.length !==0 ? this.state.currentPage : 1);
  },

  //分页
  handlePageChange(current) {
    this.listRender(current)
  },
  listRender(current){
    let forms = this.props.form.getFieldsValue();
    let param = Object.assign({}, forms, {currentPage: current});
    this.setState({
      currentPage: current
    });
    this.fetch(param);
  },
  //对话框
  setModal1Visible(id) {
    this.setState({
      modal1Visible: true,
      tenementId: id,
    });
  },

  setModa12Visible(id) {
    this.setState({
      modal2Visible: true,
      tenementId: id
    });
  },

  setModa13Visible(item) {
    this.setState({
      financeVisible: true,
      tenementId: item.id
    });
  },

  willFinancing(item) {
      let _me = this;
      let tenementId = item.id;
      Utils.sendAjax({
        url: '/loan/apply/check',
        data: JSON.stringify({tenementId: tenementId, type: 101}),
        callback: (result)=> {
          if(result.code == '200') {
            _me.setModa13Visible(item)
          }else{
            Message.error(result.message, 10)
          }
        }
      })
  },


  handleCancel() {
    this.setState({
      modal1Visible: false,
      modal2Visible: false,
      financeVisible: false,
      visible: false,
    });
    this.fetch()
  },

  //点击"租赁"
  handleRent(e){
    e.preventDefault();
    let param = {tenementId: this.state.tenementId};
    Utils.sendAjax({
      url: '/tenement/intention/rent',
      data: JSON.stringify(param),
      callback: (result) => {
        if (result.code === '200') {
          Message.success(result.message);
          this.handleCancel();
          this.fetch();
        } else {
          Message.error(result.message, 10)
        }
      }
    });
  },

  handleFinance(e) {

  },

  // 点击"修改"
  handleModify(record){
    let params = {tenementId: record.id, currentPage: this.state.currentPage};
    let goPathUrl = '/landlord/rentBeforeIndex/update';
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },

  //点击"删除意向房源"
  handleRent1(e){
    e.preventDefault();
    let param = {tenementId: this.state.tenementId};
    console.log(param)
    Utils.sendAjax({
      url: '/tenement/intention/delete',
      data: JSON.stringify(param),
      callback: (result) => {
        if (result.code === '200') {
          let goPathUrl = '/landlord/rentBeforeIndex/recover'
          this.context.router.push(goPathUrl);
        } else {
          Message.error(result.message, 10)
        }
      }
    });
  },
  handleReset() {
    this.props.form.resetFields();
  },

  render () {

    const { getFieldProps } = this.props.form;

    const financeChild = {
      financeVisible: this.state.financeVisible,
      tenementId: this.state.tenementId,
      financeType: '101', // 收房贷
      callBack: this.handleCancel,
    };

    return (
      <div>
        <div className="search-bar">
          <Form inline>
            <FormItem label="业主姓名" style={{marginBottom: 10}}>
              <Input {...getFieldProps('ownerName')} placeholder="业主姓名"/>
            </FormItem>
            <FormItem label="联系电话">
              <Input {...getFieldProps('mobilePhone')} placeholder="联系电话"/>
            </FormItem>
              <FormItem label="物业名称">
              <Input {...getFieldProps('tenementName')} placeholder="物业名称"/>
            </FormItem>
              <FormItem label="租赁期限">
              <Input {...getFieldProps('period')} placeholder="租赁期限"/>
            </FormItem>
               <FormItem label="是否看过">
              <Select {...getFieldProps('status',{initialValue: " "})} style={{width: 162}}>
                <Option value=" ">全部</Option>
                <Option value="2">是</Option>
                <Option value="3">否</Option>
              </Select>
            </FormItem>
            <FormItem label="房屋地址">
              <Input {...getFieldProps('address')} placeholder="房屋地址"/>
            </FormItem>
            <FormItem label="房屋租金">
              <Input {...getFieldProps('rentStart')} style={{width: 100}}/>
              <span> 至 </span>
              <Input {...getFieldProps('rentEnd')} style={{width: 100}}/>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
              <Button type="default" onClick={this.handleReset}>重置</Button>
            </FormItem>
          </Form>
        </div>

        <ul className="ul-show-card">
          {this.state.dataBox}
        </ul>
        {this.state.data[0] ? <div className="box-page">
          <Pagination onChange={this.handlePageChange}
                      current={this.state.currentPage} total={this.state.total}
                      pageSize={this.state.pageSize}/>
        </div> : null}
        <Modal className="wantRent" title="我要租赁" width={348}
               visible={this.state.modal1Visible}
               onCancel={this.handleCancel}
               footer="">
          <p className="prompt-text">房东大人，真的确定租赁此意向房源吗？</p>
          <Button className="lease-btn" key="submit" type="primary" size="large"
                  onClick={this.handleRent}>我要租赁</Button>
          <Button className="cogitate-btn" key="back" type="ghost" size="large"
                  onClick={this.handleCancel}>再考虑一下</Button>
        </Modal>

        <Modal title="删除" width={348}
               visible={this.state.modal2Visible}
               onCancel={this.handleCancel}
               footer="">
          <p className="prompt-text">房东大人，确定要把此房源放入回收站吗？</p>
          <Button className="sure-btn" type="primary" onClick={this.handleRent1}>确定</Button>
          <Button className="cancel-btn" type="ghost" onClick={this.handleCancel}>取消</Button>
        </Modal>

        <FinanceModal {...financeChild} />
      </div>
    );
  }
});

List = Form.create()(List);
export default List